<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="content">
                    <el-form ref="form" :model="form" :rules="rules" class="form">
                        <el-form-item label="微信二维码" prop="qrcode" style="width:224px">
                            <div class="img" v-if="form.qrcode">
                                <el-image :src="form.qrcode"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.qrcode = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                    </div>
                </div>
            </div>

        </section>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form: {
                qrcode: '',
                id: 1
            },
            rules: {
                qrcode: [
                    { required: true, message: '请上传微信二维码', trigger: 'change' },
                ],

            },
        }
    },
    created() {
    },
    mounted() {
        this.getLicenseInfo()
    },
    methods: {
        //上传头像文件等
        okUpload(file) {
            let formData = new window.FormData();
            formData.append("files", file.file);
            this.$Http.upload(formData).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        message: "上传成功",
                        type: "success",
                    });
                    this.form.qrcode = res.data
                }
            });
        },
        async getLicenseInfo() {
            let res = await this.$Http.getCustomer()
            if (res.status == 1) {
                this.form = res.data
                this.form.srcList = [this.form.qrcode]
            }
        },
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setCustomer(this.form)
                    if (res.status == 1) {
                        this.$message.success('保存成功')
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .img {
        width: 146px;
        height: 146px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 3s;
        &:hover {
            i {
                // width: 100%;
                // height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba($color: #000000, $alpha: 0.3);
                color: rgba($color: #fff, $alpha: 1);
            }
        }
        i {
            position: absolute;
            color: #fff;
            font-size: 26px;
            display: none;
        }
    }
    ::v-deep .el-form-item__label {
        float: initial;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    .kong {
        height: 40px;
    }
    section {
        background: #eee;
        padding: 30px;
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0 24px 20px;
        }
        .content {
            width: 517px;
            height: 100%;
            padding-top: 20px;
            .title {
                height: 65px;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                color: #383b40;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .el-icon-close {
                    cursor: pointer;
                }
            }
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
</style>